<template>
<div class="shortdsupfac">
	<div class="shortdsupfac-alltitle">设施服务
	</div>
	<div class="shortdsupfac-item" v-for="item,key in houseinfo.equipmentList" :key="key">
		<div class="shortdsupfaci-title">{{item.title}}</div>
		<div class="sdsfi-itembox">
				<div class="supfac-item" v-for="eitem,key in item.list" :key="key">
					<div class="si-imgbox">
						<img class="si-img" :src="eitem.grayIcon"/>
					</div>
					<p>{{eitem.amenityName}}</p>
				</div>
		</div>
	</div>
	
	<div class="shortdsupfac-allclose">
		<img src="../assets/img/close.png" @click="closesup"/>
	</div>
</div>
</template>

<script>
	import { mapGetters, mapActions } from 'vuex'
import  api from '../fetch/api'
	export default{
		name:'shortdsupfac',
		computed: {
			...mapGetters([
				'houseinfo'
			])
		},
		methods:{
			closesup(){
				this.$router.go(-1)
			}
		}
		
	}
</script>

<style scoped>
	
	.shortdsupfac{
		padding: .24rem;
		box-sizing: border-box;
		color: #282828;
		background: #fff;
	}
	.shortdsupfac .shortdsupfac-alltitle{
		width: 100%;
		font-size: .4rem;
		line-height: .83rem;
		background: #fff;
	}
	.shortdsupfac .shortdsupfac-allclose{
		
		width: 100%;
		height: .83rem;
		font-size: .4rem;
		line-height: .83rem;
		position: fixed;
		bottom: 0;
		text-align: center;
		background: #fff;
	}
	.shortdsupfac .shortdsupfac-allclose>img{
		display: block;
		width: .46rem;
		height: .46rem;
		margin: auto;
	}
	.shortdsupfac .shortdsupfac-item{
		padding: .38rem 0;
		box-sizing: border-box;
	}
	.shortdsupfac .shortdsupfaci-title{
		font-size: .35rem;
		line-height: .4rem;
	}
	.shortdsupfac .sdsfi-itembox{
		display: flex;
		-webkit-flex-wrap: wrap;
	}
	.shortdsupfac .supfac-item{
		width: 20%;
		text-align: center;
		margin: .42rem 0;
	}
	.shortdsupfac .supfac-item p{
		display: block;
		margin-top: .24rem;
		font-size: .24rem;
		color: #282828;
		line-height: .24rem;
	}
	.shortdsupfac .si-imgbox{
		width: .54rem;
		height: .5rem;
		margin: auto;
	}
	.shortdsupfac .si-img{
		max-width: 100%;
		max-height: 100%;
	}
</style>